<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{background:black;margin:0;}
  </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100vw" height="100vh">
  <defs>
    <!--
      gradientUnits="objectBoundingBox" 默认取值
      不用关心被填充的图形的长宽和坐标,按比例取值,00表示左上11表示右下
    -->
    <!--<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#1497FC"></stop>
      <stop offset="0.5" stop-color="#A469BE"></stop>
      <stop offset="1" stop-color="#FF8C00"></stop>
    </linearGradient>-->

    <!--
      gradientUnits="userSpaceOnUse" 世界坐标系
    -->
    <linearGradient id="grad1" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="300" y2="250">
      <stop offset="0" stop-color="#1497FC"></stop>
      <stop offset="0.5" stop-color="#A469BE"></stop>
      <stop offset="1" stop-color="#FF8C00"></stop>
    </linearGradient>
  </defs>
  <rect x="100" y="100" fill="url(#grad1)" width="200" height="150"></rect>
</svg>
</body>
</html>
